<template>
	<view>
		<div class="goodsbox">
			<div class="goodsimg">
				<image :src="data.goodsimg" style="width: 100%;height: 100%;" mode="aspectFill" alt=""></image>
			</div>
			<div class="goodsinfo">
				<p class="goodstitle">{{data.goodsname}}</p>
				<p class="goodsclass">{{data.goodsclass}}</p>
			</div>
		</div>
		<div class="choosebox">
			<div class="choose bottomline">
				<div class="choose_left">货物状态</div>
				<div class="choose_right">
						<picker @change="goodsstateChange" :value="goodsstateindex" :range="goodsstate">
						                        <view class="uni-input" :style="{color:goodsstateindex==0?'#888':''}">{{goodsstate[goodsstateindex]}}</view>
						</picker>
				</div>
			</div>
			<div class="choose">
				<div class="choose_left">退款原因</div>
				<div class="choose_right">
						<picker @change="reasonChange" :value="reasonindex" :range="reason">
						                        <view class="uni-input" :style="{color:reasonindex==0?'#888':''}">{{reason[reasonindex]}}</view>
						</picker>
				</div>
			</div>
		</div>
		<div class="choosebox">
			<div class="choose bottomline">
				<div class="choose_top">退款金额：</div>
				<div class="choose_bot"><span class="refundmoney">¥{{data.price}}</span></div>
			</div>
			<div class="choose">
				<div class="choose_top">退款说明：</div>
				<div class="choose_bot"><input style="width: 100%;height: 100%;" type="text" placeholder="选填"  v-model="temp"></div>
				
			</div>
		</div>
		<div class="upimgbox">
			<navigator url="../../pagesA/lucky/lucky" class="upimgtitle">上传凭证：</navigator>
			<div class="uploadimg">
				<div class="imgarr" v-for="(imgvalue,index) in fileList" :key="index">
					<!-- #ifdef MP-WEIXIN -->
					<div class="imgarr_img"><image :src="cnds+'/upload/refund/'+imgvalue.uri" style="width: 100%;height: 100%;" mode="aspectFill"></image></div>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<div class="imgarr_img"><image :src="imgvalue.uri" style="width: 100%;height: 100%;" mode="aspectFill"></image></div>
					<!-- #endif -->
					<div @tap="del_img(index)" class="imgarr_del">{{icons.shanchu}}</div>
				</div>
				<div v-if="fileList.length!=5" @tap="getimg" class="imgarr">
					<div class="imgarr_img" style="font-family: iconfont;font-size:50px;color:#eee;text-align: center;">{{icons.tupianfenxiang}}</div>
					<div class="imgarr_icon">{{icons.jiahao}}</div>
				</div>
			</div>
		</div>
		<div v-if="xiu==''" class="submit" @click="submit">提交申请</div> 
		<div v-else class="submit" @click="submit_xiu">修改申请</div>
		<div class="submits"></div>
	</view>
</template>

<script>
	var _self;
	var user;
	var user_key;
	var yhpz;
	var xiu;
	export default {
		data() {
			return {
				no:'',
				name:'上滑',//触摸状态
				icon:'',//图标
				icons:'',
				goodsstate:['请选择货物状态','已收到货','未收到货'],
				reason:['请选择退款原因','不想要了','收到商品破损','收到商品与描述不符','商品质量问题','订单信息拍错(规格/颜色)'],
				show:false,
				showtk:false,
				fileList: [],
				goodsstateindex:0,
				reasonindex:0,
				temp:'',
				cnds:'',
				height:'',
				width:'',
				xiu:'',
				countimg:5,
				data:{
					  goodsname:'第一卫小米9钢化膜8米ose手机红米k20pro贴膜9cc九mix3全屏覆盖2s水凝镜头保护热弯八液态纳米全面屏蓝光',
					  goodsclass:'颜色分类：小米8【原配高清】※强防爆+强防指纹※两片装',
					  price:'36.00',
					  goodsimg:'http://thirdwx.qlogo.cn/mmopen/vi_32/AJm2ibtDIvJjUABulNFZKeGibkduj4yeCic2KokBya7wbYjthU2qEvzPbQzIJZ0IA03N0oZNcJvuYxsQ2WEp1tOAA/132'
				},
				imagearr:[],
			}
		},
		onReady(){
			_self=this;
			this.icon=uni.getStorageSync('icon');
			this.icons=uni.getStorageSync('icons');
			this.cnds=uni.getStorageSync('CND_key');
			
		},
		onLoad(options) {
			this.no=options.no;
			this.xiu=options.xiu;
		    if(this.xiu!=''){
				uni.setNavigationBarTitle({
					title:'修改申请退款'
				})
			}
			user=uni.getStorageSync('user');
			user_key=uni.getStorageSync('user_key');
			yhpz=uni.getStorageSync('yhpz'); 
			 this.refund_data(options.no);
		},
		methods: {
			del_img:function(id){
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该图片吗？',
				    success:(res)=> {
						if (res.confirm) {
							this.fileList.splice(id,1);
						}else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
							
						});
			},
			wxuploadimg:function(res){
				uni.uploadFile({
							url: uni.getStorageSync('APP_key') + '/refund_data.php',
							filePath:res,
							name:'file',
				            formData: {
				                id:1,
				                no:this.no,
				                base64:this.temp,
				                email:this.goodsstate[this.goodsstateindex],
				                use:this.reason[this.reasonindex],
				                type:'cun',
								user:user,
								user_key:user_key, 
								yhpz:yhpz,
								typeping:'wxtup'
				            },
							header:{
								"content-type":"multipart/form-data"
							},
				            success:(res) => {
								var data=JSON.parse(res.data);
								var obj={name:'file',uri:data.img};
								this.fileList.push(obj);
							}});
			},
			getimg:function(){//上传图片
			//#ifndef MP-WEIXIN
			if(this.fileList.length<5){
				uni.chooseImage({
				    count: (5-(this.fileList.length)), //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success:(res)=> {
						var obj;
						res.tempFilePaths.forEach((item,id)=>{
							obj={name:'file'+id,uri:item}; 
							this.fileList.push(obj);
						});
				    }
				});
			}
			//#endif
			//#ifdef MP-WEIXIN
			if(this.fileList.length<5){
				uni.chooseImage({
				    count: (5-(this.fileList.length)), //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success:(res)=> {
						res.tempFilePaths.forEach((item,id)=>{
							this.wxuploadimg(item)
						}); 
				    }
				});
			}
			//#endif
			},
			submit_xiu:function(){
				if(this.goodsstateindex==0){
					uni.showToast({
					    title: '请选择货物状态',
					    duration: 2000,
						icon:'none'
					});
					return;
				}
				if(this.reasonindex==0){
					uni.showToast({
					    title: '请选择退款原因',
					    duration: 2000,
						icon:'none'
					});
					return;
				}
					if(this.fileList.length==0){
					uni.showToast({
					    title: '请上传退款凭证',
					    duration: 2000,
						icon:'none'
					});
					return;
				}
				//#ifdef MP-WEIXIN
					this.fileList.forEach((item,id)=>{
						this.imagearr.push(item.uri);
					});
					     uni.request({
					     			 		url: uni.getStorageSync('APP_key') + '/refund_data.php',
					     			 		method: 'POST',
					     			 		data: {
					     			 			id:1,
					     			 			no:this.no,
					     			 			base64:this.temp,
					     			 			email:this.goodsstate[this.goodsstateindex],
					     			 			use:this.reason[this.reasonindex],
					     			 			type:'cun_xiu', 
					     			 			user:user,
					     			 			user_key:user_key, 
					     			 			yhpz:yhpz,
												typeping:'wx',
												wximage:this.imagearr.join(',')
					      		},
					      		header: {
					      			'content-type': 'application/x-www-form-urlencoded'
					      		},
					      		dataType: 'json',
					      	success:(res)=> {
								if(res.data.id==2){
									uni.showToast({
									    title: '修改申请失败',
									    duration: 2000,
										icon:'none'
									});
								       return;
								}else if(res.data.id==3){
									uni.showModal({
									    title: '修改申请成功',
									    content: '请耐心等待回复....',
										showCancel:false,
									    success: function (res) {
											if (res.confirm) {
												uni.navigateBack({
													detail:1
												})
											}else if (res.cancel) {
											            console.log('用户点击取消');
											        }
											    }
												
											});
								
								} 
							}})
					//#endif
				    //#ifndef MP-WEIXIN
					uni.uploadFile({
								url: uni.getStorageSync('APP_key') + '/refund_data.php',
								files:this.fileList,
								filePath:this.fileList[0].uri,
								name:'file',
					            formData: {
					                id:1,
					                no:this.no,
					                base64:this.temp,
					                email:this.goodsstate[this.goodsstateindex],
					                use:this.reason[this.reasonindex],
					                type:'cun_xiu',
									user:user,
									user_key:user_key, 
									yhpz:yhpz,
					            },
								header:{
									"content-type":"multipart/form-data"
								},
					            success:(res) => {
									console.log(res);
				 if(res.data.id==2){
					uni.showToast({
					    title: '修改申请失败',
					    duration: 2000,
						icon:'none'
					});
				       return;
				}else if(res.data.id==3){
					uni.showModal({
					    title: '修改申请成功',
					    content: '请耐心等待回复....',
						showCancel:false,
					    success: function (res) {
							if (res.confirm) {
								uni.navigateBack({
									detail:1
								})
							}else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
								
							});
				
				} 
					}
					});
					//#endif
			},
			submit:function(){
				if(this.goodsstateindex==0){
					uni.showToast({
					    title: '请选择货物状态',
					    duration: 2000,
						icon:'none'
					});
					return;
				}
				if(this.reasonindex==0){
					uni.showToast({
					    title: '请选择退款原因',
					    duration: 2000,
						icon:'none'
					});
					return;
				}
					if(this.fileList.length==0){
					uni.showToast({
					    title: '请上传退款凭证',
					    duration: 2000,
						icon:'none'
					});
					return;
				}
				//#ifdef MP-WEIXIN
				this.fileList.forEach((item,id)=>{
					this.imagearr.push(item.uri);
				});
				     uni.request({
				     			 		url: uni.getStorageSync('APP_key') + '/refund_data.php',
				     			 		method: 'POST',
				     			 		data: {
				     			 			id:1,
				     			 			no:this.no,
				     			 			base64:this.temp,
				     			 			email:this.goodsstate[this.goodsstateindex],
				     			 			use:this.reason[this.reasonindex],
				     			 			type:'cun', 
				     			 			user:user,
				     			 			user_key:user_key, 
				     			 			yhpz:yhpz,
											typeping:'wx',
											wximage:this.imagearr.join(',')
				      		},
				      		header: {
				      			'content-type': 'application/x-www-form-urlencoded'
				      		},
				      		dataType: 'json',
				      	success:(res)=> {
							if(res.data.id==2){
								uni.showToast({
								    title: '申请失败',
								    duration: 2000,
									icon:'none'
								});
							       return;
							}else if(res.data.id==3){
								uni.showModal({
								    title: '申请成功',
								    content: '请耐心等待回复....',
									showCancel:false,
								    success: function (res) {
										if (res.confirm) {
											uni.navigateBack({
												detail:1
											})
										}else if (res.cancel) {
										            console.log('用户点击取消');
										        }
										    }
											
										});
							
							} 
						}})
				//#endif
		        //#ifndef MP-WEIXIN
				uni.uploadFile({
							url: uni.getStorageSync('APP_key') + '/refund_data.php',
							files:this.fileList,
							filePath:this.fileList[0].uri,
							name:'file',
				            formData: {
				                id:1,
				                no:this.no,
				                base64:this.temp,
				                email:this.goodsstate[this.goodsstateindex],
				                use:this.reason[this.reasonindex],
				                type:'cun',
								user:user,
								user_key:user_key, 
								yhpz:yhpz,
				            },
							header:{
								"content-type":"multipart/form-data"
							},
				            success:(res) => {
								console.log(res);
			 if(res.data.id==2){
				uni.showToast({
				    title: '申请失败',
				    duration: 2000,
					icon:'none'
				});
			       return;
			}else if(res.data.id==3){
				uni.showModal({
				    title: '申请成功',
				    content: '请耐心等待回复....',
					showCancel:false,
				    success: function (res) {
						if (res.confirm) {
							uni.navigateBack({
								detail:1
							})
						}else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
							
						});
			
			} 
				}
				});
				//#endif
			},
			goodsstateChange:function(e){
				this.goodsstateindex=e.detail.value;
			},
			reasonChange:function(e){
				this.reasonindex=e.detail.value;
			},
			refund_data:function(no){
				uni.request({
							 		url: uni.getStorageSync('APP_key') + '/refund_data.php',
							 		method: 'POST',
							 		data: {
							 			user:user,
							 			user_key:user_key, 
							 			yhpz:yhpz,
							 			id:5,
										type:'def',
										no:no 
				 		},
				 		header: {
				 			'content-type': 'application/x-www-form-urlencoded'
				 		},
				 		dataType: 'json',
				 	success:(res)=> {
				this.data={
					  goodsname:res.data.name,
					  goodsclass:'规格/颜色分类：'+res.data.size+res.data.color,
					  price:res.data.money,
					  goodsimg:uni.getStorageSync('CND_key')+'/upload/pro/'+res.data.img,
				  };
				}
				   	});
				   if(this.xiu==1){
					   
					   uni.request({
					   			 		url: uni.getStorageSync('APP_key') + '/refund_data.php',
					   			 		method: 'POST',
					   			 		data: {
					   			 			user:user,
					   			 			user_key:user_key, 
					   			 			yhpz:yhpz,
					   			 			id:5,
											type:'xiu',
											no:this.no
					    		},
					    		header: {
					    			'content-type': 'application/x-www-form-urlencoded'
					    		},
					    		dataType: 'json',
					    	success:(res)=> {
				  this.temp=res.data.refund_ins;
				  this.goodsstate.forEach((item,id)=>{
					  if(item==res.data.state){
						  this.goodsstateindex=id;
					  }
				  });
				  this.reason.forEach((item,id)=>{
				  					  if(item==res.data.refund_why){
				  						  this.reasonindex=id;
				  					  }
				  });
				   res.data.img.forEach((img,id)=>{
					   //#ifdef MP-WEIXIN
				         this.fileList.push({ uri:img,img:img.split('.')[0]});
				       //#endif
					   //#ifndef MP-WEIXIN
					     this.fileList.push({ uri:this.cnds+'/upload/refund/'+img,img:img.split('.')[0]});
					   //#endif
				  
				   });
				   }
				   	});
				  }
			}
		}
	}
</script>

<style lang="scss">
.submits{
	width: 100%;
	height: 100upx;
}
.goodsbox{
	width: 100%;
	height: 120px;
	background: #fff;
}
.goodsimg{
	height: 110px;
    width: 35%;
    padding: 5px 1.5%;
    text-align: center;
	float: left;
}
.goodsimg img{
	height: 100%;
}
.goodsinfo{
	float: left;
    width: 59%;
    padding-right: 2%;
    height: 115px;
    margin-left: 1%;
    padding-top: 5px;
}
.goodstitle{
	overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 14px;
}
.goodsclass{
	overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 12px;
	padding-top: 5px;
	color: #999;
}

.choosebox{
	width: 100%;
	height: 80px;
	background: #fff;
	margin-top:20upx;
}
.bottomline{
	border-bottom: 1px solid #e2e2e2;
}
.choose{
	width: 94%;
	margin:0upx 3%;
	box-sizing: border-box;
	height: 40px;
	line-height: 40px;
	font-size:14px;
	display: flex;
	justify-content: space-between;
	.choose_top{
		width:160upx;
		height: 80upx;
		line-height: 80upx;
		font-size: $color-size-2;
		}
	.choose_bot{
		width:90%;
		height: 80upx;
		line-height: 80upx;
		font-size: $color-size-2;
	}
}
.choose_left{
	width: 30%;
	float: left;
	font-size: 14px;
}
.choose_right{
	width: 70%;
	float: left;
	font-size: 14px;
}
.vant_popup_btn{
	width: 100%;
    height: 100%;
    border: none;
    line-height: 40px;
    text-align: right;
    background: none;
    color: #000;
}
.icon{
	font-family: iconfont;
	font-size: 16px;
	margin-left: 5px;
	color: #d2d2d2;
}
.upimgbox{
	width: 94%;
	font-size:14px;
	padding:0upx 3%;
	margin-top: 10px;
	background: #fff;
	padding-bottom: 20upx;
	.uploadimg{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.imgarr{
			width: 200upx;
			height: 200upx;
			position: relative;
			border:1upx solid $color-black-9;
			margin:20px 15upx;
			.imgarr_img{
				width: 200upx;
				height: 200upx;
				line-height: 200upx;
			}
			.imgarr_icon{
				position: absolute;
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				font-size: $color-sizeicon-14;
				color:$color-black-4;
				text-align: center;
				left: 0upx;
				right: 0upx;
				top:0upx;
				bottom:0upx;
				margin: auto;
				font-family: iconfont;
			}
			.imgarr_del{
				position: absolute;
				width: 50upx;
				height: 50upx;
				line-height: 50upx;
				font-size: $color-sizeicon-2;
				color:$color-red-3;
				text-align: center;
				right: 0upx;
				top:0upx;
				font-family: iconfont;
			}
		}
	}
}
.upimgtitle{
	width: 100%;
	height: 30px;
	line-height: 30px;
}
.refundmoney{
	color: #ff0239;
}
.remarks{
	color: #999;
}
/* .choose>span>input{
	width: 75%;
} */
.submit{
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #ff0239;
	color: #fff;
	text-align: center;
	font-size: 18px;
}
</style>
